<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    </style>
    <script>
        $(function (){
            $('#tianjia').click(function (){
                let ba=$("<thead>\n" +
                    "        <tr>\n" +
                    "            <td>序号</td>\n" +
                    "            <td>商品</td>\n" +
                    "            <td>价格</td>\n" +
                    "            <td>\n" +
                    "                <button>删除</button>\n" +
                    "                <button>修改</button></td>\n" +
                    "        </tr>\n" +
                    "        </thead>");
                $("#td").append(ba);
            });

        });
    </script>

</head>
<body>
 <header>
     <div>
         <span>图书名称</span><input type="text" value="text">
         <span>图书价格</span><input type="text" value="">
         <button id="tianjia" >添加</button>
     </div>
 </header>
<main>
    <table class=" table table-bordered table-bordered table-hover">
        <thead>
        <tr>
            <td>序号</td>
            <td>商品</td>
            <td>价格</td>
            <td>
                <button>删除</button>
                <button>修改</button></td>
        </tr>
        </thead>
       <tbody id="td" >
       </tbody>
    </table>
</main>
</body>
</html>